<template>
  <div class="app-container">
    <el-input v-model="search.keyword" placeholder="keywords" style="width:300px" />
    <el-date-picker v-model="search.startDate" type="date" placeholder="Start Date" value-format=" yyyy-MM-dd" format="yyyy-MM-dd" clearable />
    <el-date-picker v-model="search.endDate" type="date" placeholder="End Date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" clearable />
    <el-button type="primary" @click="getList">Search</el-button>

    <el-table :data="messageList" style="width: 100%;margin-top:30px;" border empty-text="Can't find record in table">
      <el-table-column align="header-center" label="Title">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="IsRead" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.is_read=='1'">Read</span>
          <span v-if="scope.row.is_read=='0'">Unread</span>
        </template>
      </el-table-column>
      <el-table-column align="header-center" label="Date" width="150">
        <template slot-scope="scope">
          {{ scope.row.update_time }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="Action" width="80">
        <template slot-scope="scope">
          <el-col :span="12">
            <el-link style="font-size:18px;" class="el-icon-view icon-class" @click="handleEdit(scope)" />
          </el-col>
          <el-col :span="12">
            <el-link style="font-size:18px;" class="el-icon-delete icon-class" @click="handleDelete(scope)" />
          </el-col>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :current-page="search.page"
      :page-size="search.pagesize"
      style="margin-top:10px; float:right"
      @current-change="getPageList"
    />

    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogType === 'edit' ? 'Read Message' : 'Read Message'"
    >
      <el-form :model="messageInfo" label-width="150px" label-position="left">
        <el-form-item label="Title">
          <el-input v-model="messageInfo.title" placeholder="Title" />
        </el-form-item>
        <el-form-item label="Content">
          <el-input v-model="messageInfo.content" type="textarea" :rows="5" placeholder="Content" />
        </el-form-item>
        <el-form-item label="UpdateDate">
          <el-input v-model="messageInfo.update_time" placeholder="UpdateDate" />
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button
          type="primary"
          @click="dialogVisible = false"
        >OK</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { baseAPI } from '@/utils/request'
import { deepClone } from '@/utils'
import { getMessageList, readMessageinfo } from '@/api/message'

const defaultMessage = {
  id: 0,
  title: '',
  content: '',
  to_user_id: 1,
  is_ready: 0,
  update_time: ''
}

export default {
  data() {
    return {
      message: Object.assign({}, defaultMessage),
      search: {
        keyword: '',
        startDate: '',
        endDate: '',
        page: 1
      },
      total: 10,
      pagesize: 1,
      messageList: [],
      messageInfo: [],
      dialogVisible: false,
      dialogType: 'new',
      checkStrictly: false
    }
  },
  computed: {
    routesData() {
      return this.routes
    }
  },
  created() {
    // Mock: get all routes and roles list from server
    this.getList()
  },
  methods: {
    async getList() {
      console.log(this.search)
      const res = await getMessageList(this.search)
      this.messageList = res.data
      console.log(this.search)
    },
    async getPageList(value) {
      this.search.page = value
      const res = await getMessageList(this.search)
      this.userList = res.data
      this.total = res.total
      this.currentpage = res.current_page
      this.pagesize = res.per_page
      // this.userList.push(p)
    },
    async handleEdit(scope) {
      // await readMessageinfo(this.scope.row.id)
      this.dialogType = 'edit'
      this.dialogVisible = true
      this.checkStrictly = true
      this.messageInfo = deepClone(scope.row)
      await readMessageinfo({ id: this.messageInfo.id })
      this.getList()
    },
    handleDelete({ $index, row }) {
      this.$confirm('Confirm to remove the Notification?', 'Warning', {
        confirmButtonText: 'Confirm',
        cancelButtonText: 'Cancel',
        type: 'warning'
      })
        .then(async() => {
          await baseAPI.post('user/message/delete', { id: row.id })
          this.messageList.splice($index, 1)
          this.$message({
            type: 'success',
            message: 'Delete succed!'
          })
        })
        .catch(err => {
          console.error(err)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }
  .permission-tree {
    margin-bottom: 30px;
  }
}
</style>
